<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane v-for="item in tabList" :key="item.name" :label="tabZhNames[item.name]" :name="item.name" />
    </el-tabs>
    <div class="tab-content">
      <keep-alive>
        <component :is="curTabcompnents[activeName]" />
      </keep-alive>
    </div>
  </div>
</template>

<script>
import FourWechatPane from './paycomponents/FourWechatPane'
import FourAlipayPane from './paycomponents/FourAlipayPane'
import ThreeWechatPane from './paycomponents/ThreeWechatPane'
import ThreeAlipayPane from './paycomponents/ThreeAlipayPane'
import lyAlipayPane from './paycomponents/lyAlipayPane'
import csAlipayPane from './paycomponents/csAlipayPane'
import lyAlipayPaneAppend from './paycomponents/lyAlipayPaneAppend'
import AdaWechatPane from './paycomponents/AdaWechatPane'
import AdaAlipayPane from './paycomponents/AdaAlipayPane'
import TtsfAlipayPane from './paycomponents/TtsfAlipayPane.vue'
import xiyueAlipayPane from './paycomponents/xiyueAlipayPane.vue'
import huiPayPane from './paycomponents/huiPayPane.vue'
import BcPayPane from './paycomponents/BcPayPane.vue'
import TtfAlipayPane from './paycomponents/TtfAlipayPane.vue'
import FxAlipayPane from './paycomponents/FxAlipayPane.vue'
import FxWechatPane from './paycomponents/FxWechatPane.vue'
import HzAlipayPane from './paycomponents/HzAlipayPane.vue'
import HzWechatPane from './paycomponents/HzWechatPane.vue'
import zlZpayPane from './paycomponents/zlZpayPane.vue'
import yyZFBpayPane from './paycomponents/yyZFBpayPane.vue'
import ZFTZFBpayPane from './paycomponents/ZFTZFBpayPane.vue'
import Sortable from 'sortablejs'
import {
  setRechargeSortList,
  getRechargeSortList
} from '@/api/settings/paysetting'

export default {
  name: 'Tab',
  components: {
    AdaWechatPane,
    AdaAlipayPane,
    csAlipayPane,
    FourWechatPane,
    lyAlipayPane,
    FourAlipayPane,
    ThreeWechatPane,
    ThreeAlipayPane,
    TtsfAlipayPane,
    xiyueAlipayPane,
    huiPayPane,
    BcPayPane,
    TtfAlipayPane,
    FxAlipayPane,
    FxWechatPane,
    HzAlipayPane,
    HzWechatPane,
    lyAlipayPaneAppend,
    yyZFBpayPane,
    ZFTZFBpayPane,
    zlZpayPane
  },
  data() {
    return {
      // tabList: [{ name: 'wxAda', sort: 0 }, { name: 'zfbAda', sort: 1 }],
      tabList: [],
      tabZhNames: {
        'wx': '第三方微信',
        'zfb': '智星 第三方支付宝',
        'lyZFB': '六一 支付宝',
        'csZFB': '测试支付宝',
        'lyZFBOne': '六一 支付宝附加',
        'wxOther': '第四方微信',
        'zfbOther': '第四方支付宝',
        'wxAda': 'Ada 微信',
        'zfbAda': 'Ada 支付宝',
        'zfbTtcf': '天天畅付 支付宝',
        'wxTtcf': '天天畅付 微信',
        'zfbItem': '曦月 支付宝',
        'huiPay': '慧支付',
        'bcPay': '必诚支付',
        'merchantPay': '统统付支付宝',
        'FXZFB': '富信支付宝',
        'FXWX': '富信微信',
        'HZZFB': '海至支付宝',
        'HZWX': '海至微信',
        'zlZFB': '直连支付',
        'yyZFB': ' 游易支付宝',
        'ZFT': ' 直付通'

      },
      activeName: 'FXWX',
      curTabcompnents: {
        'wxTtcf': 'TtsfWechatPane',
        'zfbTtcf': 'TtsfAlipayPane',
        'lyZFB': 'lyAlipayPane',
        'csZFB': 'csAlipayPane',
        'lyZFBOne': 'lyAlipayPaneAppend',
        'wxAda': 'AdaWechatPane',
        'zfbAda': 'AdaAlipayPane',
        'wxOther': 'FourWechatPane',
        'zfbOther': 'FourAlipayPane',
        'zfb': 'ThreeAlipayPane',
        'zfbItem': 'xiyueAlipayPane',
        'huiPay': 'huiPayPane',
        'bcPay': 'BcPayPane',
        'merchantPay': 'TtfAlipayPane',
        'FXZFB': 'FxAlipayPane',
        'FXWX': 'FxWechatPane',
        'HZZFB': 'HzAlipayPane',
        'HZWX': 'HzWechatPane',
        'zlZFB': 'zlZpayPane',
        'ZFT': 'ZFTZFBpayPane',
        'yyZFB': 'yyZFBpayPane'
      }

    }
  },
  watch: {
    activeName(val) {
      this.$router.push(`${this.$route.path}?tab=${val}`)
    }
  },
  mounted() {
    this.setSort()
  },
  created() {
    this.getRechargeSortList()
    // init the default selected tab
    const tab = this.$route.query.tab
    if (tab) {
      this.activeName = tab
    }
  },
  methods: {
    getRechargeSortList() {
      getRechargeSortList().then(res => {
        this.tabList = res.data.sort((a, b) => a.sort - b.sort)
      })
    },
    setSort() {
      const el = document.querySelector('.el-tabs__nav')
      const _this = this
      // 设置配置
      const ops = {
        animation: 1000,
        // 拖动结束
        onEnd: (evt) => {
          const oldItem = _this.tabList[evt.oldIndex]
          _this.tabList.splice(evt.oldIndex, 1)
          _this.tabList.splice(evt.newIndex, 0, oldItem)
          _this.tabList.map((item, index) => {
            item.sort = index
          })
          setRechargeSortList(_this.tabList).then(res => { })
        }
      }
      // 初始化
      Sortable.create(el, ops)
    },
    handleClick(tab) {
      this.activeName = tab.name
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0px;
  ::v-deep .el-tabs{
    .el-tabs__header{
      .el-tabs__nav-wrap {
        height: 100%;
        display: flex;
        align-items: center;
        .el-tabs__nav-prev{
          font-size: 20px;

        }
      }
    }
  }
}
</style>
